<template>
    <div class="changeDetail">
        <van-nav-bar title="新增调度"
        @click-left="onClickLeft"
                 fixed>
        <van-icon name="arrow-left"
                slot="left"
                color="#333"
                size="0.6rem" />
        <van-icon :name="require('@/assets/img/computer.png')"
                slot="right"
                color="#333"
                size="0.6rem" />
        </van-nav-bar>
        <div class="detailInfo">
            <van-cell-group name="">
               <van-cell title="订单类型"
                  size="large"
                  :value="pickParams.deliveryFlagText"
                  @click="showType = !showType" />
               <van-action-sheet v-model="showType"
                          :round="false"
                          :actions="actionsType"
                          @select="onSelect"
                          cancel-text="取消" />

                <van-cell title="上门时间"
                   type="number"
                   size="large"
                   :value="pickParams.orderTime"
                   @click="changeTime"/>
               <van-popup v-model="showTime" position="bottom">
               <van-datetime-picker
                  v-model="currentDate"
                  type="datetime"
                  title="选择时间"
                  :loading="isLoadingShow"
                  :min-date="minDate"
                  :max-date="maxDate"
                  :formatter="formatter"
                  @confirm="confirm"
                  @cancel="showTime=false"
               />
               </van-popup>
                <van-field label="客户名称"
                   placeholder="请输入客户名称"
                   input-align="right"
                   v-model="pickParams.customerName" />
            
                <van-field label="联系人电话"
                   type="number"
                   size="large"
                   placeholder="请输入联系人电话"
                   input-align="right"
                   v-model="pickParams.customerTel"  />
            
                <van-field label="装车地点"
                   placeholder="请输入装车地点"
                   input-align="right"
                   @click="pickParams.deliveryFlag==1?'':inputAddrss()"
                   v-model="pickParams.loadAddress"  />
            
                <van-field label="卸车地点"
                   placeholder="请输入卸车地点"
                   input-align="right"
                   @click="pickParams.deliveryFlag==1?inputAddrss():''"
                   v-model="pickParams.unloadAddress"  />
                <van-field label="货物名称"
                   placeholder="请输入货物名称"
                   input-align="right"
                   v-model="pickParams.goodsName"  />
            
                <van-field label="货物件数"
                   type="number"
                   size="large"
                   placeholder="请输入货物件数"
                   input-align="right"
                   v-model="pickParams.goodsAmount"  />
               <van-field label="货物情况"
               type="text"
               size="large"
               placeholder="请输入散货/成托/其他(长宽高等)"
               input-align="right"
               v-model="pickParams.goodsRemark"  />

                <van-field label="货物重量"
                   size="large"
                   placeholder="请输入货物重量"
                   input-align="right"
                   extra="kg"
                   v-model="pickParams.goodsTon"
                   style="width: 85%;">
                  </van-field>
                  <label class="goosTonRight">公斤</label>

            
                <van-field label="货物体积"
                   size="large"
                   placeholder="请输入货物体积"
                   input-align="right"
                   v-model="pickParams.goodsCube" 
                   style="width: 90%;" />
                   <label class="goosTonRight">方</label>
            
                <van-cell title="是否过泵"
                  :value="pickParams.measuredFlag == 0?'否':'是'"
                  @click="showMeasuredFlag=!showMeasuredFlag"
                />
               <van-action-sheet v-model="showMeasuredFlag"
                   :round="false"
                   :actions="actionsFlag"
                   @select="onSelectFlag"
                   cancel-text="取消" />
               <van-cell title="所在部门"
                   :value="pickParams.deptName"
                   @click="showDep=!showDep"
                 />
                <van-action-sheet v-model="showDep"
                    :round="false"
                    :actions="depList"
                    @select="onSelectDep"
                    cancel-text="取消" />
                    <van-cell title="所在站点"
                    :value="pickParams.stationName"
                    @click="staToggle"
                  />
                 <van-action-sheet v-model="showSta"
                     :round="false"
                     :actions="stationList"
                     @select="onSelectStation"
                     cancel-text="取消" />
            </van-cell-group>
            <vant-cell-group >
               <van-field label="备注"
                   size="large"
                   placeholder="请输入"
                   input-align="right"
                   class="marginTop"
                   v-model="pickParams.orderRemark"  />
            </vant-cell-group>
        </div>
        <div class="footer">
            <div class="btn-wrap">
               <div class="btn-left"
               @click="cancelOrder">
                  <span>取消</span>
               </div>
               <div class="btn-right" 
               @click="confirmOrder">
                  <span>确认</span>
               </div>
            </div>
         </div>
    </div>
    
</template>
<script>
import { addOrderInfo,queryAllDept,getStationInfoList } from '@/api/pickup';
import Vue from 'vue';
import { DatetimePicker,Popup,CellGroup,Cell } from 'vant';
import {confirmPicker} from '@/utils/utils';

Vue.use(DatetimePicker,Popup,CellGroup,Cell);

export default {
  data () {
    return {
      showType:false,
      actionsType:[{ name: '提货订单',value:'0' }, { name: '送货订单',value:'1' }],
      showTime:false,
      currentDate:new Date(),
      minDate:new Date(),
      maxDate: new Date(2020, 12, 31),
      isLoadingShow:false,
      showMeasuredFlag:false,
      actionsFlag:[{name:'是',value:'1'},{name:"否",value:'0'}],
      showRemark:false,
      actionsRemark:[{name:'散货',value:'散货'},{name:"成托",value:'成托'},{name:"其他",value:'其他'}],
      showDep:false,
      depList:[],
      showSta:false,
      stationList:[],
      pickParams:{
            orderSrc:'h5',//订单来源
            orderRemark:'',//订单备注
            salerName:window.localStorage.getItem("username"),//责任销售
            salerTel:window.localStorage.getItem("userMobile"),//责任销售TEL
            customerName:'',//客户名称
            customerTel:'',//客户电话
            deliveryFlag:'',//是否是送货(0提货1送货)  NotNull(message = "请选择提货还是送货!")
            deliveryFlagText:'请选择提货还是送货',
            loadAddress:'',//实际装车地址  @NotNull(message = "装车地址不能为空!")
            unloadAddress:'东光四通易达分拣中心',//实际卸车地址 @NotNull(message = "卸车地址不能为空!")
            goodsName:'',//货名
            goodsAmount:'',//件数
            goodsRemark:'',//货物情况描述
            goodsTon:'',//重量（吨）
            measuredFlag:1,//是否过泵
            goodsCube:'',//体积（方）
            orderTime:confirmPicker(new Date())+":00",//订单时间(上门时间)@NotNull(message = "订单时间不能为空!")
            deptId:'',
            deptName:'请选择部门',
            goodsX:'',
            goodsY:'',
            stationName:'请先选择部门'
      },
      stationParam:{
         "deptId":"",
         "pickupFlag":1,
         "deliveryFlag":null
      }
    };
  },
  mounted () {
   // this.initOrderTime();
   this.queryAllDept();
   let item = JSON.parse(window.localStorage.getItem("paramJson"));

   if(item){
      this.pickParams = item;
      window.localStorage.removeItem("paramJson");
   }
  },
  methods: {
     //初始化上门时间 当前时间加两小时
   initOrderTime(){
      // var now = new Date();
      // // var time = now.getTime() + 1000 * 60 * 60 * 2;
      // // var after=new Date(time);

      // this.pickParams.orderTime = confirmPicker(after)+":00";
      // console.log(this.pickParams.orderTime);
   },
     //弹出选择订单类型
   changePick(){
      this.showType = true;
   },
   //选择订单类型
   onSelect(item) {
      this.showType = false;
      this.pickParams.deliveryFlag = item.value;
      if(item.value == 0){
         this.pickParams.deliveryFlagText = '提货订单';
         this.pickParams.unloadAddress = '东光四通易达分拣中心';
         this.pickParams.loadAddress = '';
         this.stationParam.pickupFlag =1;
         this.stationParam.deliveryFlag = null;
      }else{
         this.pickParams.deliveryFlagText = '送货订单';
         this.pickParams.unloadAddress = '';
         this.pickParams.loadAddress = '东光四通易达分拣中心';
         this.stationParam.pickupFlag =null;
         this.stationParam.deliveryFlag = 1;
      }
    },
    onSelectFlag(item){
      this.showMeasuredFlag = false;
      this.pickParams.measuredFlag = item.value;
    },
    changeTime(){
       this.showTime = true;
       this.isLoadingShow = true;
       setTimeout(() => {
          this.isLoadingShow = false;
       }, 500);
    },
    // 选项格式化函数
    formatter (type, value) {
      if (type === 'year') {
        return `${value}年`;
      } else if (type === 'month') {
        return `${value}月`;
      } else if (type === 'day') {
        return `${value}日`;
      } else if (type === 'hour') {
        return `${value}时`;
      } else if (type === 'minute') {
        return `${value}分`;
      } else if (type === 'second') {
        return `${value}秒`;
      }
      return value;
    },
    //选择上门时间
    confirm(val){
      this.pickParams.orderTime = confirmPicker(val)+":00";
      this.showTime = false;
    },
    cancelOrder(){
      this.$router.back();
    },
    confirmOrder(){
      if(this.checkParams()){
         // this.pickParams.orderTime = "";
         this.pickParams.goodsTon = this.pickParams.goodsTon/1000;
         addOrderInfo(this.pickParams).then(res=>{
            if(res.code == 200){
               this.$toast("新增成功");
               setTimeout(() => {
                  this.$router.push({
                     path: '/pickUpList',
                     query: {}
                  });
               }, 500);
            }
            console.log(res);
         });
      }
    },
    //获取部门
    queryAllDept(){
      queryAllDept().then(res=>{
         if(res.code == 200){
            let newData = [];
   
            let obj = {};
   
            res.data.map(item => {
               obj = item;
               obj['name'] = item['deptName'];  
               delete obj['keyName'];
               newData.push(obj);   
            });
            this.depList = newData;
         }
         console.log(res);
      });
    },
    onSelectDep(item){
       console.log(item);
       this.pickParams.deptId = item.deptId;
       this.pickParams.deptName = item.name;
       this.stationParam.deptId = item.deptId;
       this.showDep = false;
       this.pickParams.stationName = '请选择站点';
       this.getStationInfoList();
      },
      //获取站点
      getStationInfoList(){
        getStationInfoList(this.stationParam).then(res=>{
           if(res.code == 200){
            let newData = [];
   
            let obj = {};

            res.data.map(item => {
               obj = item;
               obj['name'] = item['stationName'];
               newData.push(obj);   
            });
            this.stationList = newData;
           }
        });
      },
      onSelectStation(item){
         this.pickParams.stationId = item.stationId;
         this.pickParams.stationName = item.stationName;
         this.showSta = false;
      },
      staToggle(){
         if(this.pickParams.deptId == ""){
            this.$toast.fail('请先选择部门');
         }else{
            this.showSta = true;
         }
      },
    checkParams(){
       var regPhone = /^1(3|4|5|6|7|8|9)\d{9}$/;

       if(this.pickParams.deliveryFlag == ""){
          this.$toast.fail('请选择提货还是送货');
          return false;
       }
       if(this.pickParams.orderTime == ""){
          this.$toast.fail('请选择上门时间');
          return false;
       }
       if(this.pickParams.customerName == ""){
          this.$toast.fail('请输入客户名称');
          return false;
       }
       if(this.pickParams.customerTel == ""){
          this.$toast.fail('请输入联系电话');
          return false;
       }else if(!regPhone.test(this.pickParams.customerTel)){
          this.$toast.fail('请输入正确的手机号');
          return false;
       }
       if(this.pickParams.loadAddress == ""){
          this.$toast.fail('请输入装车地址');
          return false;
       }
       if(this.pickParams.unloadAddress == ""){
          this.$toast.fail('请输入卸车地址');
          return false;
       }
       if(this.pickParams.addressMiles == ""){
          this.$toast.fail('请输入里程数');
          return false;
       }
       if(this.pickParams.goodsName == ""){
          this.$toast.fail('请输入货物名称');
          return false;
       }
       if(this.pickParams.goodsAmount == ""){
          this.$toast.fail('请输入货物件数');
          return false;
       }
       if(this.pickParams.goodsRemark == ""){
          this.$toast.fail('请输入货物情况');
          return false;
       }
       if(this.pickParams.goodsTon == ""){
          this.$toast.fail('请输入货物重量');
          return false;
       }
       if(this.pickParams.goodsCube == ""){
          this.$toast.fail('请输入货物体积');
          return false;
       }
       if(this.pickParams.salerName == ""){
          this.$toast.fail('请输入客户维护人');
          return false;
       }
       if(this.pickParams.salerTel == ""){
          this.$toast.fail('请输入客户维护人电话');
          return false;
       }
       return true;
    },
    onClickLeft () {
      this.$router.back();
    },
    inputAddrss(){
      window.localStorage.setItem("paramJson",JSON.stringify(this.pickParams));
      this.$router.push({
          path: '/inputAddress',
          query: {}
        });
    }
  },
  watch: {
  },
  computed: {
   
  }
};
</script>
<style lang="scss" scoped>
.changeDetail {
  width: 100%;
  height: 100%;
  background: #f8f8f8;
}

.detailInfo {
  // width: 94%;
  padding-top: 56px;
  margin-left: 12px;
  margin-right: 12px;
  text-align: left;
//   padding-bottom:70px;
  .assure {
    .van-cell__title {
      flex: 2;
    }
    .custom-assure {
      color: #ff6540;
    }
  }
}

.cell {
  margin-top: 10px;
}
.goosTonRight{
   float: right;
   margin-top: -37px;
   font-size: 16px;
   margin-right: 15px;
}

.detailBtn {
  width: 100%;
  background: #fff;
  height: 60px;
  position: fixed;
  bottom: 0;
  text-align: center;
  .btn-wrap {
    padding: 10px 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    .btn-left {
      background: #fff;
      border: 1px solid #f18d00;
      border-radius: 2px;
      color: #f18d00;
      font-size: 18px;
      width: 47%;
      height: 44px;
      line-height: 44px;
      box-sizing: border-box;
      text-align: center;
    }
    .btn-right {
      width: 47%;
      height: 44px;
      line-height: 44px;
      font-size: 18px;
      background: #f18d00;
      border: 1px solid #f18d00;
      box-sizing: border-box;
      border-radius: 2px;
      color: #fff;
      text-align: center;
    }
  }
}
.footer {
//   position: fixed;
//   left: 0;
//   right: 0;
//   bottom: 0;
  background: #fff;
  text-align: center;
  .btn-wrap {
    padding: 10px 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    .btn-left {
      background: #fff;
      border: 1px solid #f18d00;
      border-radius: 2px;
      color: #f18d00;
      font-size: 18px;
      width: 47%;
      height: 44px;
      line-height: 44px;
      box-sizing: border-box;
    }
    .btn-right {
      width: 47%;
      height: 44px;
      line-height: 44px;
      font-size: 18px;
      background: #f18d00;
      border: 1px solid #f18d00;
      box-sizing: border-box;
      border-radius: 2px;
      color: #fff;
    }
    .btn-error {
      width: 47%;
      height: 44px;
      line-height: 44px;
      font-size: 18px;
      background: #ff6540;
      border: 1px solid #ff6540;
      box-sizing: border-box;
      border-radius: 2px;
      color: #fff;
    }
  }
}
.marginTop{
   margin: 10px 0;
}
</style>